<template>
  <q-input dense outlined v-model="myDate" mask="date">
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
          <q-date v-model="myDate">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="Close" color="primary" flat />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script lang="ts">
import { defineComponent, toRefs, computed } from 'vue';


export default defineComponent({
  name: 'AmyDate',
  props: {
    date: {
      type: String,
      default: () => {
        return '2020/09/01'
      }
    }
  },
  emits: ['update:date'],
  setup (props, context) {
    //数据解构
    const {
      date
    } = toRefs(props);

    //日期
    let myDate = computed({
      get: () => {
        return date.value;
      },
      set: (d: string) => {
        context.emit('update:date', d);
      }
    });

    return {
      myDate
    }
  }
})
</script>

<style lang="scss" scoped>


</style>
